﻿@model Web_App___AWS_ELB_Monitor.Models.ELBPreviewViewModel

@{
    ViewBag.Title = "ELBPreview";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
   
    <style type="text/css">
        html, body
        {
            height: 100%;
        }
        #BadInstanceIds {color:Red;}
        #Tabs.ui-widget ul.ui-tabs-nav {
            font-size:12px;
            font-family:monospace;
            text-align:center;
        }
        #Tabs .server-status 
        {
            /* fallback */ 
            background-repeat: repeat-x; 
            background-size: 1px 150px;
            background-position: 0 0;
            
            background-image: -webkit-linear-gradient(#C7D3DC,#5B798E);  
            background-image: -moz-linear-gradient(#C7D3DC,#5B798E);  
            background-image: -o-linear-gradient(#C7D3DC,#5B798E);  
            background-image: -ie-linear-gradient(#C7D3DC,#5B798E); 
        }
        
        #Tabs .server-status-FAIL 
        {           
            background-image: -moz-linear-gradient(#ff0000, #cf0404); /* FF3.6+ */
            background-image: -webkit-linear-gradient(#ff0000,#cf0404); /* Chrome10+,Safari5.1+ */
            background-image: -o-linear-gradient(#ff0000,#cf0404); /* Opera 11.10+ */
            background-image: -ms-linear-gradient(#ff0000,#cf0404); /* IE10+ */
            background-image: linear-gradient(#ff0000,#cf0404); /* W3C */
        }

        #Tabs .server-status-OK 
        {            
            background-image: -moz-linear-gradient(#65ED87, #00CB19); /* FF3.6+ */
            background-image: -webkit-linear-gradient(#65ED87,#00CB19); /* Chrome10+,Safari5.1+ */
            background-image: -o-linear-gradient(#65ED87,#00CB19); /* Opera 11.10+ */
            background-image: -ms-linear-gradient(#65ED87,#00CB19); /* IE10+ */
            background-image: linear-gradient(#65ED87,#00CB19); /* W3C */
        }
        #Tabs .server-status-OK.response-not-latest
        {
            background-image: -moz-linear-gradient(#F3FF35, #FFBF00); /* FF3.6+ */
            background-image: -webkit-linear-gradient(#F3FF35,#FFBF00); /* Chrome10+,Safari5.1+ */
            background-image: -o-linear-gradient(#F3FF35,#FFBF00); /* Opera 11.10+ */
            background-image: -ms-linear-gradient(#F3FF35,#FFBF00); /* IE10+ */
            background-image: linear-gradient(#F3FF35,#FFBF00); /* W3C */
        }
        
        #Tabs .ui-state-active {background-position: 0 50%;  }
        #Tabs .ui-state-hover  {background-position: 0 100%;  }
        
        #Tabs.ui-tabs .ui-tabs-nav li.server-status a span {
            float:right;
        }
        #Tabs .server-status.server-info-loaded em {
            float:left;
            font-style:normal;
            font-weight:bold;
            text-transform:uppercase;
        }
        #Tabs .server-status.server-info-loaded em:before,
        #Tabs .server-status.server-info-loaded em:after {
            color:#fff;
            width:16px;
            height:16px;
            line-height:16px;
            font-size:12px;
            margin-right:5px;
            border-radius:10px;
            -moz-border-radius:10px;
            -webkit-border-radius:10px;
            background:#888;
        }
        #Tabs .server-status.server-info-loaded em:before {
            display:block;
            content:"i";
        }
        #Tabs .server-status.server-info-loaded em:after {
            display:block;
            content:"b";
            margin-top:3px;
        }
        
        #Tabs .server-status.latest-build em:after {
            background:green;
        }
        #Tabs .server-status.out-of-date-build em:after {
            background:red;
        }

        #Tabs .server-status.deploy-status-sad em:after {
            background: black;
        }
        #Tabs .server-status.deploy-status-error em:after {
            background: gray;
        }
        /*     $(elem).removeClass("deploy-status-sad");
             $(elem).removeClass("deploy-status-error */
        
        
        #Tabs .server-status.out-of-date-index-count-0 em:before {
           background:green;
        }
        #Tabs .server-status.out-of-date-index-count-1 em:before {
            background:yellow;
            color:#000;
        }
        #Tabs .server-status.out-of-date-index-count-2 em:before {
            background:orange
        }
        #Tabs .server-status.out-of-date-index-count-3 em:before,
        #Tabs .server-status.out-of-date-index-count-4 em:before,
        #Tabs .server-status.out-of-date-index-count-5 em:before,
        #Tabs .server-status.out-of-date-index-count-6 em:before,
        #Tabs .server-status.out-of-date-index-count-7 em:before,
        #Tabs .server-status.out-of-date-index-count-8 em:before,
        #Tabs .server-status.out-of-date-index-count-9 em:before,
        #Tabs .server-status.out-of-date-index-count-10 em:before,
        #Tabs .server-status.out-of-date-index-count-11 em:before,
        #Tabs .server-status.out-of-date-index-count-12 em:before,
        #Tabs .server-status.out-of-date-index-count-13 em:before,
        #Tabs .server-status.out-of-date-index-count-14 em:before,
        #Tabs .server-status.out-of-date-index-count-15 em:before,
        #Tabs .server-status.out-of-date-index-count-16 em:before,
        #Tabs .server-status.out-of-date-index-count-17 em:before,
        #Tabs .server-status.out-of-date-index-count-18 em:before,
        #Tabs .server-status.out-of-date-index-count-19 em:before {
            background:red
        }
    </style>

   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  
  
   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>  
    
 <script>
    function fillAvailableSpace(strJQuerySelector)
    {  
        var fillItem = $(strJQuerySelector);
    	var firstFillItem = fillItem.first();
    	var firstFillItemMargin = firstFillItem.outerHeight(true) - firstFillItem.height();
    	fillItem.height(firstFillItem.parent().height() - firstFillItem.prevAll().outerHeight(true) - firstFillItemMargin);
    }
    
    function highlightTabsWithDifferentContent() {
        var tabHeaders = $('#Tabs .server-status.server-status-OK');

        var latestDateTimeOffset = new Date(1);
        tabHeaders.each(function () {
            var date = new Date($(this).attr("lastModified"));
            if (latestDateTimeOffset < date)
                latestDateTimeOffset = date;
        });
        tabHeaders.each(function () {
            var date = new Date($(this).attr("lastModified"));
            if (latestDateTimeOffset > date)
                $(this).addClass("response-not-latest");
        });
    }

    $(document).ready(function () {
        var tabs = $("#Tabs").tabs();
        fillAvailableSpace("#Tabs");
        fillAvailableSpace(".ui-tabs-panel");
        fillAvailableSpace("#Tabs iframe");
        highlightTabsWithDifferentContent();
    });

    $(window).resize(function () {
        fillAvailableSpace("#Tabs");
        fillAvailableSpace(".ui-tabs-panel");
        fillAvailableSpace("#Tabs iframe");
    });
 </script>
 <script>
     var allServerInfos = [];
     function updateBuildInfos() {
         $(".server-item").each(function (index, elem) {
             var hostname = $(elem).attr("data-hostname");
             var port = $(elem).attr("data-port");

             $.ajax({
                 url: "http://"+hostname + ":"+port+"/ServerInfo?format=jsonp&callback=?",
                 dataType: "jsonp",
                 success: function (data) {
                     handleBuildInfo(elem, data);
                 },
                 error: function (error,a,b,c) {
                    //debugger;
                 }
             });
         });
     }

     function handleBuildInfo(elem, data) {
         allServerInfos.push(data);
     
         $(elem).data("serverinfo", data);

         var latestIndexDates = {};
         var latestBuildNumber = null;

         if (allServerInfos.length > 1) {
             var a = 5;
         }
         // figure out the latest index dates for all servers
         for (var serverIndex = 0; serverIndex < allServerInfos.length; serverIndex++) {
             var server = allServerInfos[serverIndex];

             // figure out if this server's indexes are later than the ones we've seen already
             for (var i = 0; i < server.indexInfo.length; i++) {
                 var indexName = server.indexInfo[i].indexName;
                 var indexDate = server.indexInfo[i].indexDate ==null ? null : parseJsonDate(server.indexInfo[i].indexDate);

                 if (indexDate != null) {
                     var existingDate = latestIndexDates[indexName];
                     if (existingDate == null || existingDate < indexDate) {
                         latestIndexDates[indexName] = indexDate;
                     }
                 }
             }

             // figure out if this server's build number is newer than the ones we've seen already
             if (latestBuildNumber == null || latestBuildNumber < server.buildNumber) {
                 latestBuildNumber = server.buildNumber;
             }
             
         }


         var latestIndexDatesDebug = "";
         var totalIndexes=0;
         for (var key in latestIndexDates) {
             totalIndexes++;
             latestIndexDatesDebug += key + "\t" + latestIndexDates[key] + "\n";
         }
         //alert(loadedCount+"  "+latestIndexDatesDebug);

         var isAnyServerUnhappy = false;

         // update all servers now that we know everything
         $(".server-item").each(function (index, elem) {
             var dataForServer = $(elem).data("serverinfo");
             if (dataForServer == null) return;

             $(elem).removeClass("server-info-loaded");
             $(elem).removeClass("out-of-date-build");
             $(elem).removeClass("latest-build");
             $(elem).removeClass("deploy-status-happy");
             $(elem).removeClass("deploy-status-sad");
             $(elem).removeClass("deploy-status-error");
             for (var i = 0; i < 50; i++) {
                 $(elem).removeClass("out-of-date-index-count-" + i);
             }

             if (allServerInfos.length > 1) {
                 var a = 5;
             }
             var outOfDateIndexes = totalIndexes;
             var outOfDateIndexNameBuffer = "";
             for (var i = 0; i < dataForServer.indexInfo.length; i++) {
                 var keyForIndex = dataForServer.indexInfo[i].indexName;
                 var dateForIndex = dataForServer.indexInfo[i].indexDate == null ? null : parseJsonDate(dataForServer.indexInfo[i].indexDate);

                 var latestDateForIndex = latestIndexDates[keyForIndex];

                 if (dateForIndex == null) {
                     if (latestDateForIndex != null) {
                         outOfDateIndexNameBuffer += keyForIndex + "(MISSING), ";
                     } else {
                         // do nothing, don't increment indexes count
                     }
                 } else if (dateForIndex < latestDateForIndex) {
                     outOfDateIndexNameBuffer += keyForIndex + ", ";
                 } else {
                     outOfDateIndexes--;
                 }
             }
             $(elem).attr("title", outOfDateIndexNameBuffer);

             var serverBuildOutOfDate = dataForServer.buildNumber < latestBuildNumber;

             $(elem).addClass("out-of-date-index-count-" + outOfDateIndexes);
             if (serverBuildOutOfDate) {
                 $(elem).addClass("out-of-date-build");
             } else {
                 $(elem).addClass("latest-build");
             }
             $(elem).addClass("server-info-loaded");
             
             if (dataForServer.deployStatus == "sad") {
                 isAnyServerUnhappy = true;
             }

             switch (dataForServer.deployStatus) {
                 case "happy":
                 case "sad":
                 case "error":
                     $(elem).addClass("deploy-status-" + dataForServer.deployStatus);
                     break;
             }
         });

         if (isAnyServerUnhappy) {
             $("body").css("background","#fdd");
             $("#clientSideErrorMessageContainer").text("A server reported that its deployment was unhappy. If this persists after reload then this indicates a problem with the deployment process.");
         }
     }

     function parseJsonDate(input) {
         return new Date(parseInt(input.replace('/Date(', '').replace(')/', ''), 10));
     };
     $(updateBuildInfos);
 
 </script>
</head>

<body>
    <h2>Load Balancer for @Model.ELBName at health-check target @Model.ELBHealthCheckTarget</h2>
    <div id="BadInstanceIds">
        @if (Model.BadInstanceIds.Length>0) {
            bool needComma = false;
            <p>Amazon thought these instance IDs were attached to the load balancer. However, Amazon failed to return information about them. They may no longer exist.</p>
            <p>@foreach (var badId in Model.BadInstanceIds)
            {@* white-space prevention
                *@<text>@((needComma ? ", " : "") + badId)</text>@*
                *@needComma = true;@*
            *@}
            </p>
        }
    </div>
    <span id="clientSideErrorMessageContainer"></span>
    <div id="Tabs">
    <ul>
    @foreach (var item in Model.ServerUrls)
    {
        <li class='server-item server-@item.ServerId server-status' data-hostname="@item.HostName" data-port="@item.Port"><a href="#server-@item.ServerId" title="@item.SiteUrl"><em></em><span>@item.ServerId<br />(@(string.IsNullOrWhiteSpace(item.ServerName) ? "Unnamed" : item.ServerName))<br />@(item.Zone)</span></a></li>
    }
    </ul>

    @foreach (var item in Model.ServerUrls)
    {
         <div id="server-@item.ServerId">
            <table style="width:100%">
                <tr>
                    <td>Server Name: <a href="@item.SiteUrl" target="_blank">@item.ServerId</a></td>
                    <td>Url: <a href="@item.SiteUrl" target="_blank">@item.SiteUrl</a></td>
                </tr>
            </table>
            <iframe src="@item.SiteUrl" style="display:block;width:100%"></iframe>
         </div>
    }
    </div>
    <div>
        <p>Use these URLs to quickly open all of the sites in their own tabs</p>
        <ul>
            @foreach (var item in Model.ServerUrls)
            {
                <li><a href="@Html.Raw(HttpUtility.HtmlAttributeEncode(item.SiteUrl))">@item.SiteUrl</a></li>
            }
        </ul>
    </div>
</body>
</html>



